<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>博客屋</title>

    <link rel="stylesheet" href="../js/layui/css/layui.css" />
    <style>
        body {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
        }
        
        .top_head {
            height: auto;
            width: auto;
        }
        /*登录*/
        
        .login_but {
            float: right;
        }
        /*注册*/
        
        .reg_but {
            float: right;
        }
        /*热门课程*/
        
        .hot_class_main {
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 30px;
        }
        /*热门课程图片*/
        
        .hot_class_pic {
            height: 180px;
            width: 280px;
        }
        /*热门课程 单个展示div*/
        
        .hot_class_one {
            height: 245px;
            width: 280px;
            float: left;
            margin-left: 35px;
            margin-bottom: 12px;
        }
        /*基础span样式--文字过长隐藏---------------------------------------------------------------*/
        
        .basis_span {
            /*text-overflow: ellipsis;文本超出容器，以省略号显示  	overflow: hidden;*/
            /*white-space: nowrap;是不允许文字换行*/
            /*word-break: keep-all;不允许把单词拆开*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /*边框样式*/
        
        .border_style {
            border: 1px solid #dcdcdc;
            border-radius: 4px;
        }
        /*热门课程名称h3*/
        
        .hot_oneclass_title {
            height: 30px;
            line-height: 30px;
            width: 100%;
            margin-bottom: 3px;
            border-width: 1px 0px 1px 0px;
            border-style: solid;
            border-color: #dcdcdc;
            border-radius: 4px;
        }
        /*更多课程按钮*/
        
        .more_class {
            float: right;
            margin-right: 20px;
            margin-bottom: 10px;
        }
        /*网页博客部分总div*/
        
        .main_new_blog {
            width: 100%;
            height: 1000px;
        }
        /*博客主div*/
        
        .main_oneblog {
            width: 100%;
        }
        /*博客列表div*/
        
        .main_new_blog_list {
            width: 80%;
            height: 400px;
            float: left;
        }
        /*博客分类div*/
        
        .main_new_blog_classification {
            width: 20%;
            height: 400px;
            float: left;
        }
        /*博客列表 ul*/
        
        .blog_list_ui {
            margin-right: 20px;
            height: auto;
        }
        /*博客li*/
        
        .main_oneblog_li {
            margin-left: 2%;
        }
        /*一个博客*/
        
        .oneblog {
            width: 100%;
            height: 200px;
        }
        /*博客标题div*/
        
        .lst_blog_title {
            height: 50px;
            line-height: 50px;
            width: 100%;
        }
        /*博客作者头像*/
        
        .oneblog_image {
            height: 30px;
            width: 30px;
            border-radius: 30px;
        }
        /*时间 观看 评论数*/
        
        .small_icon_state {
            line-height: 50px;
            margin-right: 8px;
        }
        /*图片 dt*/
        
        .lst_blog_bodyPic {
            width: 320px;
            height: 135px;
            display: block;
            float: left
        }
        /*博客 内容*/
        
        .lst_blog_bodyContent {
            display: block;
            width: 654px;
            float: left;
            height: 135px;
        }
        /*一 博客标题*/
        
        .oneblog_title {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: 400;
            color: #605e5e;
        }
        /*一 博客内容*/
        
        .oneblog_content {
            width: auto;
            color: #808080;
            line-height: 18px;
            font-size: 13px;
            max-height: 100px;
            margin-bottom: 10px;
            text-align: justify;
            overflow: hidden;
        }
        /*博客分类标题*/
        
        .blog_classify {
            line-height: 37px;
            font-size: 16px;
            padding-left: 20px;
            color: #333;
        }
        /*博客分类名字*/
        
        .blog_classify_name {
            border-bottom: 1px dotted #ccc9c9;
            height: 40px;
            line-height: 40px;
            padding-left: 5px;
        }
        
        .hrs {
            margin-bottom: 0px;
        }
    </style>
    <!--display: block; float: left    
display:block;float:left-->
    <script>
    </script>
</head>

<body id='app'>
    <!--顶部导航栏-->
    <div class="layui-main top_head">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">博客屋</a></li>
            <li class="layui-nav-item layui-this"><a href="">主页</a></li>
            <li class="layui-nav-item"><a href="">课程</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
            <li class="layui-nav-item"><a href="">博客</a></li>
            <li class="layui-nav-item  login_but"><a href="">注册</a></li>
            <li class="layui-nav-item  reg_but"><a href="">登录</a></li>
        </ul>
    </div>

    <!--大图-->
    <img src="../pic/test/1.jpg" style="width:100%;height:100%;">

    <!--内容区-->
    <div class="hot_class_main">
        <!--在线视频区-->
        <blockquote class="layui-elem-quote layui-quote-nm">在线视频</blockquote>
        <div class="hot_class">
            <!--第一排-->
            <div class="hot_class_one border_style" v-for="n in 4">
                <img class="hot_class_pic" src="../pic/test/2.jpg" />
                <h3 class="basis_span  hot_oneclass_title ">某某学堂白贺翔互联网JAVA架构师视频</h3>
                <span>来源于:网络</span><span style="float:right;">更新至第五节</span>
            </div>
        </div>

        <div class="hot_class">
            <!--第二排-->
            <div class="hot_class_one border_style" v-for="n in 4">
                <img class="hot_class_pic" src="../pic/test/2.jpg" />
                <h3 class="basis_span  hot_oneclass_title ">某某学堂白贺翔互联网JAVA架构师视频</h3>
                <span>来源于:网络</span><span style="float:right;">更新至第五节</span>
            </div>
        </div>
        <hr/>
        <p class="more_class_p"><button class="layui-btn layui-btn-primary more_class">更多课程</button></p>
        <hr/>

        <!--博客-->
        <blockquote class="layui-elem-quote">技术分享</blockquote>
        <div class="main_new_blog">
            <div class="main_new_blog_list">
                <ul class="blog_list_ui border_style">
                    <li class="main_oneblog_li">
                        <div class="oneblog" v-for="n in 4">
                            <div class="lst_blog_title">
                                <img class="oneblog_image" src="../pic/test/3_tou.jpg" /> <span>阳光很刺眼</span>
                                <span class="small_icon_state" style="float:right;height:50px;"><i class="layui-icon" style="font-size: 20px; ">&#xe63a;(0)</i></span>
                                <span class="small_icon_state" style="float:right;height:50px;"><i class="layui-icon" style="font-size: 20px; ">&#xe60c;(237)</i></span>
                                <span class="small_icon_state" style="float:right;height:50px;font-size: 18px;">&nbsp;2017/01/17</span>
                            </div>
                            <div class="lst_blog_body">
                                <ul>
                                    <li class="lst_blog_bodyPic" style="display:inline;"><img src="../pic/test/4.jpg" style="width:300px;height:135px;"></li>
                                    <li class="lst_blog_bodyContent" style="display:inline;">
                                        <h4 class="oneblog_title">2016年iOS公开可利用漏洞总结</h4>
                                        <div class="oneblog_content">0x00 序 iOS的安全性远比大家的想象中脆弱，除了没有公开的漏洞以外，还有很多已经公开并且可被利用的漏洞，本报告总结了2016年比较严重的iOS漏洞（可用于远程代码执行或越狱），希望能够对大家移动安全方面</div>
                                        <h4 class="oneblog_title" style="width:100%;text-align:right"><button class="layui-btn layui-btn-small layui-btn-radius layui-btn-danger">查看详情</button></h4>
                                    </li>
                                </ul>
                            </div>
                            <hr>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="main_new_blog_classification ">
                <div class="main_new_blog_classification_border border_style">
                    <h2 class="blog_classify">博客分类</h2>
                    <hr class="hrs" />
                    <ol>
                        <li class="main_oneblog_li blog_classify_name">信息安全</li>
                        <li class="main_oneblog_li blog_classify_name">移动开发</li>
                        <li class="main_oneblog_li blog_classify_name">前端开发</li>
                        <li class="main_oneblog_li blog_classify_name">后端开发</li>
                    </ol>
                </div>
            </div>
        </div>

    </div>
    <script src="../js/layui/lay/dest/layui.all.js"></script>
    <script src="../js/vue/vue1.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'
        });
    </script>
</body>

</html>